<template>
    <div class="home_warp_header">
        <div class="home_warp_header_left">
            {{ time }}
        </div>

        <div class="home_warp_header_center">
            <span>智慧河湖水利一张图服务平台</span>
        </div>

        <ul class="home_warp_header_right">
                <li v-for="item in rightbtnlist" :key="item.key" class="">
                    <img :src="item.logo" alt="">
                    <span>{{item.title}}</span>
                </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, onUnmounted } from "vue";
import xiulog from '../../assets/image/home/xiugaimima.png'
import userlog from '../../assets/image/home/yonghutouxiang.png'
import tuilog from '../../assets/image/home/tuichu.png'
import dayjs from 'dayjs'
const time = ref(null)
let timer = null
const rightbtnlist =[
    {
        title:"修改密码",
        key:"1",
        logo:xiulog
    },
    {
        title:"admin",
        key:"2",
        logo:userlog
    },
    {
        title:"退出",
        key:"3",
        logo:tuilog
    }
]

// 获取时间戳
const getTimeValue = () => {
    time.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
}

onMounted(() => {
    getTimeValue()
    timer = setInterval(() => {
        getTimeValue()
    }, 1000)
})

// 组件销毁 也将定时器进行销毁
onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})
</script>

<style lang="less" scoped>
.home_warp_header {
    position: relative;
    height: 3.5rem;
    display: flex;
    padding: 0 1.5rem;
    width: calc(100% - 3rem);
    left: 0;
    background-image: url('../../assets/image/home/header_top.png');
     background-color: linear-gradient(to right, rgba(24,104,180,.67) 0%, rgba(255, 0, 0, 0) 50%, rgba(24,104,180,.67) 100%);
     position: absolute;
     z-index: 10;

    .home_warp_header_left {
        position: absolute;
        font-size: 1.2rem;
        color: #fff;
        bottom: 0;
    }
    .home_warp_header_right{
          position: absolute;
          right: 1.5rem;
          color: #fff;
          padding: 0;
          margin: 0;
          bottom: 0;
          display: flex;
          z-index: 10;
          li{
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-left: 1.5rem;
            img{
                height: 1.5rem;
                margin-right: 0.3rem;
            }
          }
    }

    .home_warp_header_center {
        position: absolute;
          z-index: 10;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
        font-size: 2rem;
        font-weight: bolder;
        color: #fff;
        /* 文本颜色 */
        text-shadow: 0 0 5px #3A80D5,
            /* 水平偏移 0, 垂直偏移 0, 模糊半径 5px, 颜色 #ff0 (黄色) */
            0 0 10px #3A80D5,
            0 0 15px #3A80D5,
            0 0 20px #3A80D5;
    }
}
</style>